<template>
  <el-container>
    <el-aside width="200px">
      <CompanyMenu></CompanyMenu>
    </el-aside>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"><Breadcrumb></Breadcrumb></div></el-col>
    </el-row>
    <el-main>
      <el-form :model="company" :rules="rules" ref="company" label-width="100px" class="demo-ruleForm" style="margin-top:30px;width: 400px">
        <el-form-item label="logo" prop="logo">
          <el-upload class="avatar-uploader" list-type="picture" :action="action" @change="handlePreview" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <template #tip>
              <div class="el-upload__tip">
                请上传.jpg .jpeg .png .bmp .webp .bif格式
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input type="sort" v-model="company.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简称" prop="simple">
          <el-input type="sort" v-model="company.simple" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="官网" prop="website">
          <el-input type="sort" v-model="company.website" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="company.introduction">
          </el-input>
        </el-form-item>
        <el-form-item label="人数" prop="count">
          <el-select v-model="company.count" placeholder="请输入企业人数">
            <el-option label="0-10" :value="10" />
            <el-option label="10-100" :value="100" />
            <el-option label="100-500" :value="500" />
            <el-option label="500-1000" :value="1000" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="companyType">
          <el-select v-model="company.companyTypeId" placeholder="Activity zone">
            <template v-for="companyType in companyTypes" :key="companyType.id">
              <el-option :label="companyType.name" :value="companyType.id" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="sort" v-model="company.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="CompanyEdit()" :disabled="canClick">立即修改</el-button>
        </el-form-item>
      </el-form>
      <el-button type="text"></el-button>
    </el-main>
  </el-container>
</template>

<script>
import instanceToken from "@/utlis/tokenIdentify.js";
import CompanyMenu from "@/components/menu/CompanyMenu.vue";
import Breadcrumb from "@/components/leader/department/Breadcrumb";
export default {
  name: 'MaintainView',
  components: {
    CompanyMenu,
    Breadcrumb
  },
  data() {
    let valDataCompanyLogo = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("企业logo称不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    let valDataCompanyName = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        this.canClick = true;
        callback(new Error("企业名称不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    let valDataCompanySimple = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("简称不能为空"));
      }
      else {
        this.canClick = false;
        callback();
      }
      // var str = value;
      // var re = /\d+/;
      // if (!re.test(str)) {
      //   callback(new Error("只能为数字"))
      // }else {
      //   callback()
      // }
    };
    let valDataCompanyWebsite = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("企业官网不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    let valDataCompanyIntroduction = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("企业简介不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    let valDataCompanyCount = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("人数不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    let valDataCompanyCompanyType = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("企业类型名称不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    let valDataCompanyEmail = (rule, value, callback) => {
      if (!value) {
        this.canClick = true;
        callback(new Error("企业类型名称不能为空"))
      } else {
        this.canClick = false;
        callback();
      }
    };
    return {
      canClick:false,
      imageUrl: '',
      action:'',
      company:{},
      companyTypes: [],
      file:'',

      rules: {
        logo: [{
          validator: valDataCompanyLogo,
          trigger: 'blur'
        }],
        name: [{
          validator: valDataCompanyName,
          trigger: 'blur'
        }],
        simple: [{
          validator: valDataCompanySimple,
          trigger: 'blur'
        }],
        website: [{
          validator: valDataCompanyWebsite,
          trigger: 'blur'
        }],
        introduction:[{
          validator: valDataCompanyIntroduction,
          trigger: 'blur'
        }],
        count:[{
          validator: valDataCompanyCount,
          trigger: 'blur'
        }],
        companyType:[{
          validator: valDataCompanyCompanyType,
          trigger: 'blur'
        }],
        email:[{
          validator: valDataCompanyEmail,
          trigger: 'blur'
        }],
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData(){
      instanceToken.get("/company/leader/initData").then(res =>{
        console.log(res.data.data)
        this.company = JSON.parse(JSON.stringify(res.data.data));
        this.imageUrl = "http://localhost:8989/static/uploadFiles/companyLogo/"+this.company.logo;
      });
      instanceToken.get("/company/leader/initCompanyType").then(res =>{
        this.companyTypes = res.data.data;
      })
    },
    //文件上传之前执行的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isJPEG = file.type === 'image/jpeg';
      const  isWebp = file.type === 'image/webp';
      const  isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isWebp && !isJPEG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG,JPEG,Webp,PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isWebp && isLt2M;
    },
    //文件预览
    handlePreview(file){
      this.file = file;
      this.imageUrl = file.url;
    },
    CompanyEdit(){
      let formData = new FormData();
      formData.append("file",this.file.raw);
      formData.append("name",this.company.name);
      formData.append("simple",this.company.simple);
      formData.append("website",this.company.website);
      formData.append("introduction",this.company.introduction);
      formData.append("count",this.company.count);
      formData.append("companyTypeId",this.company.companyTypeId);
      formData.append("email",this.company.email);
      instanceToken.post("/company/leader/companyEdit",formData,
          {headers:{'content-type':'multipart/form-data'}}).then(res =>{
              if (res.data.success){
                this.$alert('修改成功', '修改', {
                  confirmButtonText: '确定',
                });
              }else {
                this.$alert('修改失败,请刷新重试', '修改', {
                  confirmButtonText: '确定',
                });
              }
      })
    },
  },
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>